<template>
  <div id="BindingVip">
    <el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
      width="400"
    >
      <template #header>
        <div class="my-header">
          <div class="header-title mb20">
            <button
              style=""
              @click="handleClose"
              class="close-icon curpoin"
              @mouseover="isRotated = true"
              @mouseleave="isRotated = false"
            >
              <img
                style="width: 30px"
                :class="{
                  'rotate-right': isRotated,
                  'rotate-left': !isRotated,
                }"
                src="../../assets/images/close.png"
                alt=""
              />
            </button>
            <div>
              <div
                style="text-align: center"
                class="font-weight-bold mt40 mb40"
              >
                绑定会员卡
              </div>
            </div>
          </div>
          <el-form
            ref="ruleFormRef"
            :rules="rules"
            :model="formLabelAlign"
            style="max-width: 460px"
          >
            <el-form-item prop="member_id">
              <el-input
                size="large"
                v-model="formLabelAlign.member_id"
                placeholder="会员卡号"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                size="large"
                v-model="formLabelAlign.password"
                placeholder="卡号密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                :loading="loading"
                type="primary"
                style="width: 100%"
                size="large"
                @click="onSubmit"
              >
                {{ loading ? '绑定中...' : '绑定' }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getMemberBind } from '@/api/login';
const store = useStore();
const ruleFormRef = ref('');
const loading = ref(false);
const rules = reactive({
  member_id: [{ required: true, message: '请输入会员卡号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
});
const formLabelAlign = ref({
  member_id: '',
  password: '',
});
const isRotated = ref(false);
const dialogVisible = ref(false);
const onSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      handleMemberBind();
    } else {
      return;
    }
  });
};
const handleMemberBind = () => {
  loading.value = true;
  getMemberBind(formLabelAlign.value)
    .then((res) => {
      if (res.data.code == 20000) {
        ElMessage({
          message: res.data.msg,
          type: 'success',
        });
        store.dispatch('user/changeToken', res.token);

        // store.dispatch("user/");
        dialogVisible.value = false;
        loading.value = false;
        location.reload();
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'error',
        });
        dialogVisible.value = false;
        loading.value = false;
      }
    })
    .catch(() => {
      dialogVisible.value = false;
      loading.value = false;
    });
};
const handleClose = () => {
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
};
const handleOpenVisible = () => {
  dialogVisible.value = true;
};
defineExpose({
  handleOpenVisible,
});
</script>

<style lang="scss" scoped>
#BindingVip {
  position: relative; /* 设置父元素为相对定位 */
  .close-icon {
    position: absolute;
    top: 20px;
    right: 10px;
    background: 0 0;
    border: none;
    outline: 0;
    font-size: 16px;
  }
}
.rotate-right {
  transition: transform 0.6s ease;
  transform: rotate(180deg);
}

.rotate-left {
  transition: transform 0.6s ease;
  transform: rotate(0deg);
}
</style>
